<template>
  <div class="chat_box_8">
    <!-- 地图 -->
    <div class="map_container flex-center">
      <div id="mapContainer" class="map_box" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { AMapManager } from "@/utils/AMapManager";

let manManager: AMapManager;

defineOptions({
  name: "MapIndex",
});

onMounted(() => {
  viewMap();
});

onUnmounted(() => {
  manManager.destroy();
});

/**
 * @description 初始化高德地图
 */
async function viewMap() {
  manManager = new AMapManager({
    elementId: "mapContainer",
    zoom: 9,
    zooms: [5, 10],
    center: [113.882147, 27.643721],
    mapStyle: "amap://styles/grey",
  });
  await manManager.init();

  drawDistrict("萍乡市");
  // drawDistrict("上栗县");
  // drawDistrict("芦溪县");
  // drawDistrict("莲花县");
  // drawDistrict("湘东区");
}

/**
 * 绘制行政区
 */
function drawDistrict(name: string) {
  // 获取到数据
  manManager.getDistrictData(name).then((res: any) => {
    var bounds = res.boundaries;
    const polygon = manManager.drawPolygon(bounds);

    polygon.on("mouseover", () => {
      polygon.setOptions({
        fillOpacity: 0.7,
        fillColor: "#7bccc4",
      });
    });

    polygon.on("mouseout", () => {
      polygon.setOptions({
        fillOpacity: 0.5,
        fillColor: "#80d8ff",
      });
    });

    polygon.on("click", () => {
      alert(name);
    });
  });
}
</script>

<style lang="scss" scoped>
.chat_box_8 {
  background-color: #0f1e43;
  z-index: 99;
  position: absolute;
  left: 30%;
  right: 30%;
  top: 7vh;
  height: 55vh;
  box-sizing: border-box;
  padding: 10px;

  .map_container {
    width: 100%;
    height: 100%;
    display: flex;

    .map_box {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
